import { ElButton, ElDialog, ElInput } from 'element-plus'
import {createVNode, defineComponent, reactive, render} from 'vue'

const DialogComponent = defineComponent({
  props:{
    option: {
      type: Object
    }
  },
  setup(props,ctx){

    let state = reactive({
      isShow: false,
      option:  props.option
    })
    ctx.expose({
      showDialog(option){
        state.isShow = true
        state.option = option
      }
    })

   const onCancel = () => {
      state.isShow = false
    }

    // 确定的时候，需要将json数据应用生效=> 利用callback形式处理，将数据返回出去，让业务自己去处理
   const  onConfirm = () => {
      state.isShow = false
      state.option.onConfirm &&  state.option.onConfirm(state.option.content)
    }
    return ()  => {
      return <ElDialog v-model={state.isShow} title={state.option.title}>
        {{
          default:() => <ElInput
            type="textarea"
            v-model={state.option.content }
            row={10}
          >
          </ElInput>,
          footer:() => state.option.footer && <div>
            <ElButton onClick={onCancel}>取消</ElButton>
            <ElButton type="primary" onClick={onConfirm}>确定</ElButton>
          </div>
        }}
      </ElDialog>
    }
  }
})
let vm;
export function $dialog(option){
  // element-plus中有el-dialog组件
  // 手动挂载组件，new SubComponent.$mount() 
  if(!vm){
    // 创建一个div,点击的时候，把这些元素都扔进去
   let el =  document.createElement('div')

   // 将组件渲染到这个el元素上，=> 在vue3中，想把一个组件渲染到页面，第一件事情就是创建组件的虚拟节点，挂载到真实节点
  vm =  createVNode(DialogComponent,{option})
  console.log(vm, 'render(vm, el)',render(vm, el), el)

  // 将el渲染到页面中，第一步，将虚拟节点渲染到el里面去，然后插入一个el元素
  
  document.body.appendChild((render(vm, el), el))
  }
  
  // 怎么让vm虚拟节点能拿到DialogComponent状态？然后更改它？ => 让DialogComponent里面暴露一个方法，让vm去调用
  let {showDialog} = vm.component.exposed
  showDialog(option)

}